<template>
  <div class="zhiboxiaoshou_fabu2">
    <top v-if="!hide"></top>
    <div class="flex zhiboxitong_content">
      <div class="left" v-if="!hide">
        <left></left>
      </div>
      <div class="right" style="position: relative;">
        <div class="zhiboxitong_right">
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>发布直播页</el-breadcrumb-item>
          </el-breadcrumb> -->
          <div class="flex">
            <div  class="flex">
              <div >
                <div class="at_flex">
                  <img src="../../static/img/home_page.png"/>
                  <div>当前布局</div>  
                </div>  
                <div style="margin-bottom: 40px;">
                  <span style="font-size:14px">官方投诉</span>
                  <el-switch
                  style="margin-left: 10px;"
                  v-model="newpeizhi.is_complaint"
                    active-color="#2974FF"
                    inactive-color="#ccc"
                    :active-value="1" :inactive-value="0">
                  </el-switch>
                  <el-checkbox :true-label="1"
    :false-label="0" style="margin-left:10px" v-model="newpeizhi.is_complaint_chinese_display">按钮是否显示文字</el-checkbox>
                  <div style="margin-top: 20px;padding-left: 70px;display:flex">
                    <el-radio v-model="newpeizhi.complaint_position" :label="1">随页面滑动悬浮（突出展示）</el-radio>
                    <el-radio v-model="newpeizhi.complaint_position" :label="2">右上角固定位置（不突出）</el-radio>
                  </div>

                </div>  
                <div style="margin-bottom: 40px;display: flex;
                align-items: center;">
                  <span style="font-size:14px">浏览更多</span>
                  <el-switch
                  style="margin-left: 10px;margin-right: 10px;"
                  v-model="newpeizhi.is_more"
                    active-color="#2974FF"
                    inactive-color="#ccc"
                    :active-value="1" :inactive-value="0">
                  </el-switch>
                  <el-tooltip class="item" effect="dark" content="" placement="right">
                    <div slot="content">此为 悬浮窗，对应页面管理处右上角的编辑汇总页，<br>开启会在页面显示该悬浮窗，用户点击进入您设置的汇总页，<br>此为个性化功能，非需要无需开启</div>
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                  <el-checkbox :true-label="1"
    :false-label="0" style="margin-left:10px" v-model="newpeizhi.is_more_chinese_display">按钮是否显示文字</el-checkbox>
                </div>   
                <div v-if="this.$route.query.xcxtype != 'wx'" style="margin-bottom: 40px;display: flex;
                align-items: center;">
                  <span style="font-size:14px">用户归属地跟踪</span>
                  <el-switch
                  style="margin-left: 10px;margin-right: 10px;"
                  v-model="newpeizhi.address_display_type"
                    active-color="#2974FF"
                    inactive-color="#ccc"
                    :active-value="1" :inactive-value="0">
                  </el-switch>
                  <el-tooltip class="item" effect="dark" content="" placement="right">
                    <div slot="content">根据用户的IP地址解析用户所在地区，并自动筛选相应地区套餐，如果没有则展示全国。</div>
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>   
                <div style="margin-bottom: 40px;display: flex;">
                  <span style="font-size:14px">广告图</span>
                  <div>
                    <chuantu v-if="showtp" style="width: 200px;background:white;margin-left: 24px;" ref="chuantu4" @getimg="getimg4" :widths="'200px'" :imgs="newpeizhi.top_banner" :heights="'80px'" ></chuantu>
                    <div class="tianjiatit" style="width: 200px;margin-top: 10px;margin-bottom: 0;" >(推荐广告尺寸1290*682)</div> 
                  </div>
                                 
                  <!-- <div class="tianjiatit" style="margin-bottom: 0;margin-top: 20px;width: 200px;" >顶部广告位图片</div>
                  <div class="tianjiatit" style="width: 200px;" >(推荐广告尺寸1290*682)</div> -->
                </div>  
                
                
                

                <div style="margin-bottom: 30px;display: flex;align-items: center;font-size:14px">
                  背景颜色
                  <div style="display: flex;align-items: center;margin-left: 10px;">
                    <div @click="choosecolbtn('#C2DEFA')" style="background-color: #C2DEFA;" class="t_choose_color_box"></div>
                    <div @click="choosecolbtn('#C2C2FA')" style="background-color: #C2C2FA;" class="t_choose_color_box"></div>
                    <div @click="choosecolbtn('#FAC2D0')" style="background-color: #FAC2D0;" class="t_choose_color_box"></div>
                    <div @click="choosecolbtn('#FAC4C2')" style="background-color: #FAC4C2;" class="t_choose_color_box"></div>
                    <div @click="choosecolbtn('#FADFC2')" style="background-color: #FADFC2;" class="t_choose_color_box"></div>
                    <div @click="choosecolbtn('#C2EEFA')" style="background-color: #C2EEFA;" class="t_choose_color_box"></div>
                    <div @click="choosecolbtn('#BAF1CC')" style="background-color: #BAF1CC;" class="t_choose_color_box"></div>
                    <el-color-picker style="margin-left: 10px;background:white" v-model="newpeizhi.color" size="small" ></el-color-picker>

                  </div>
                </div>
                 <div class="at_flex">
                  <img src="../../static/img/home_page.png"/>
                  <div>添加页面模块</div>  
                </div>   
                 <!-- <el-button type="primary" style="bottom: 20px 0;">选择模板</el-button> -->
                 <div style="width: 140px; height:100px; background:white;margin: 20px 0 10px 0; cursor: pointer;border-radius:12px" class="flexcc" @click="add(1)">
                   <img src="../../static/img/img_module.png" style="width: 50px;height:50px">
                 </div>
                 <div class="tianjiatit contain_module" @click="add(1)">增加图片模块</div>
                 <div style="width: 140px; height:100px;margin-bottom: 10px; cursor: pointer;background:white;border-radius:12px" class="flexcc" @click="add(2)">
                  <img src="../../static/img/size_module.png" style="width: 50px;height:50px">
                 </div>
                 <div class="tianjiatit contain_module" @click="add(2)">增加文字说明</div>
                 <div style="width: 140px; height:100px;margin-bottom: 10px; cursor: pointer;background:white;border-radius:12px" class="flexcc" @click="add(3)">
                  <img src="../../static/img/swiper_module.png" style="width: 50px;height:50px">
                 </div>
                 <div class="tianjiatit contain_module" @click="add(3)">轮播图模块</div>
                 <div class="flex">
                   <div style="margin-right: 20px;">
                     <div style="width: 140px; height:100px;margin-bottom: 10px; cursor: pointer;background:white;border-radius:12px" class="flexcc" @click="add(4)">
                   <img src="../../static/img/topnav_module.png" style="width: 100px;height:30px">
                     </div>
                     <div class="tianjiatit contain_module" @click="add(4)">增加导航</div>
                   </div>
                   <div style="position: relative;">
                     <div style="width: 140px; height:100px;margin-bottom: 10px; cursor: pointer;background:white;border-radius:12px" class="flexcc" @click="add(6)">
                      <img src="../../static/img/topnav_module.png" style="width: 100px;height:30px">
                     </div>
                     <div class="tianjiatit contain_module" @click="add(6)">增加底部导航</div>
                   </div>
                 </div>

              </div>
              <div class="flex">
                <div class="fleft" style="position: relative;">
                  <div >
                    <img src="../../static/img/Status_black.png" />
                  </div>
                  <div style="height: 700px; overflow: auto; " :style="youdima" >
                    <div style="position: relative;">
                      <img v-if="newpeizhi.top_banner" :src="newpeizhi.top_banner" alt="" style="width: 100%;display: block;">
                      <img v-else src="../../static/img/topbanner.png" alt="" style="width: 100%;display: block;">
                      <img v-if="newpeizhi.is_complaint==1&&newpeizhi.complaint_position==2" src="../../static/img/ts.png" alt="" style="position: absolute;right: -10px;top: 80px;width: 120px;">

                    </div>
                    <img v-if="newpeizhi.is_complaint==1&&newpeizhi.complaint_position==1" src="../../static/img/ts2.png" alt="" style="position: absolute;right: 10px;bottom: 200px;width: 120px;">
                    <img v-if="newpeizhi.is_more" src="../../static/img/morelist.png" alt="" style="position: absolute;right: 20px;bottom: 170px;width: 100px;">
                    <div style="width: 95%;margin-left: auto;margin-right: auto;background-color: rgba(232, 243, 255,0.8);padding: 20px 10px;border-radius: 20px;">
                      <div class="li" v-for="(item,index) in list" :key="index"  :class="[bianjiindex == index?'bianjizhong':'',item.type == 6?'dibudaohang':'']" >

                        <div v-if="item.type == 1" @click="bianji(item,index,$event)" :ref="'li'+index">
                          <div v-if="!item.img" class="awu">请点击编辑图片...</div>
                          <div v-if="item.img"><img :src="item.img" ></div>
                        </div>
                        <div v-if="item.type == 2" @click="bianji(item,index,$event)" :ref="'li'+index">
                          <div v-if="!item.text" class="awu">请点击编辑文字....</div>
                          <div v-if="item.text" style="font-size: 12px;padding: 10px;color: #666;">{{item.text}}</div>
                        </div>
                        <div v-if="item.type == 3" @click="bianji(item,index,$event)" :ref="'li'+index" style="width: 100%;height: 200px;">
                          <el-carousel height="200px" arrow="never" >
                              <el-carousel-item v-for="(item2,index2) in item.list" :key="index2" :style="{background:'url('+item2.img+')',backgroundSize:'cover'}">
                                <div v-if="!item2.img" class="awu">请先编辑图片...</div>
                                <!-- <div v-if="item2.img"><img :src="item2.img" ></div> -->
                              </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div v-if="item.type == 4" @click="bianji(item,index,$event)" :ref="'li'+index">
                          <div class="flex" style="justify-content: space-around;padding: 20px 0;">
                            <div class="nav" style="background-color: white;flex:none;padding: 10px ;border-radius: 10px;" v-for="(item2,index2) in item.list" :key="index2" v-if="item2.isshow&&item2.url!=''" >
                              <div>
                                <div class="flexcc" v-if="item2.img"><img :src="item2.img"/></div>
                                <div class="flexcc" v-if="!item2.img"><img src="../assets/img/fengjing.jpg"/></div>
                              </div>
                              <div style="text-align: left;">
                                <div v-if="item2.name" style="font-size: 12px;">{{item2.name}}</div>
                                <div v-if="item2.name=='联系客服'" style="font-size: 12px;color: #666666;">咨询订单及物流</div>
                                <div v-else style="font-size: 12px;color: #666666;">查询订单及物流</div>
                              </div>
                              
                            </div>
                          </div>
                        </div>

                        <div v-if="item.type == 5" @click="bianji(item,index,$event)" :ref="'li'+index">
                          <div class="flex" v-if="item.radio == 1">
                            <div class="t_tag_box">
                              <div class="t_tag_font">全部</div>
                              <div class="t_tag_font">移动</div>
                              <div class="t_tag_font">联通</div>
                            </div>
                            <div class="yige flex" style="background-color: white;width: 100%;padding: 10px;border-radius: 5px;" v-for="item2 in item.list" :key="index2">
                              <div class="shopliimg"><img :src="item2.img"/></div>
                              <div class="shopliname">
                                <div style="color:#333333;font-size: 15px;">{{item2.name}}</div>
                                <div style="color:#999999;font-size: 12px;margin-top: 5px;margin-bottom: 5px;">下单自选选号的本地卡</div>
                                <div style="display:flex;">
                                  <div class="t_list_tag" >235G流量</div>
                                  <div class="t_list_tag">100分钟通话</div>
                                  
                                </div>
                                <div class="flexbc" style="margin-top: 10px;" >
                                  <div style="display: flex;align-items: center;">
                                    <div style="color: #FE3162;font-size: 14px;">￥1.99</div>
                                    <s style="color: #999999;font-size: 12px;margin-left: 5px;">￥99</s>
                                  </div>
                                  <div style="color: white;background-color:  #FE3162 ;border-radius: 15px;padding: 3px 10px;">立即抢购</div>
                                </div>
                              </div>
                            </div>

                          </div>
                          <div v-if="item.radio == 2">
                            <div class="t_tag_box">
                              <div class="t_tag_font">全部</div>
                              <div class="t_tag_font">移动</div>
                              <div class="t_tag_font">联通</div>
                            </div>
                            <div class="flexb" >
                            
                              <div class="liangge " v-for="item2 in item.list" :key="index2">
                                <div class="shopliimg"><img :src="item2.img"/></div>
                                <div class="shopliname">
                                  <div style="line-height: 20px;">{{item2.name}}</div>
                                  <div style="color: #E90010;">￥1.99</div>
                                </div>
                              </div>

                            </div>
                          </div>
                          
                        </div>
                        <div v-if="item.type == 6" @click="bianji(item,index,$event)" :ref="'li'+index" >
                          <div class="flex"  style="justify-content: space-around; padding-top: 5px;">
                            <div class="nav" style="display:block" v-for="(item2,index2) in item.list" :key="index2" v-if="item2.isshow&&item2.url!=''">

                              <div class="flexcc" v-if="item2.img"><img :src="item2.img" style="width: 18px; height: 18px; margin-bottom: 5px; display: block;"></img></div>
                              <div class="flexcc" v-if="!item2.img"><img src="../assets/img/fengjing.jpg" style="width: 18px; height: 18px; margin-bottom: 5px; display: block;"></img></div>
                              <div v-if="item2.name" style="font-size: 12px; color: rgb(188, 188, 188);">{{item2.name}}</div>
                            </div>
                          </div>
                        </div>
                        </div>
                    </div>
                    

                  </div>


                </div>

                <div class="shunxu" v-if="bianjiindex != null" :style="{top:bianjitop+'px'}">
                  <div>
                    <div><img src="https://static.91haoka.cn/gantanhao/shang.png" @click="shang()"></div>
                    <div><img src="https://static.91haoka.cn/gantanhao/xia.png" @click="xia()"></div>
                    <div><img src="https://static.91haoka.cn/gantanhao/shanchu.png" @click="shan()" v-if="bianjitype == 1 || bianjitype == 2 || bianjitype == 3 || bianjitype == 4 || bianjitype == 6"></div>
                  </div>

                </div>

              </div>
            </div>



          </div>
          <!-- <div class="flex" style="margin: 20px 0;">
            <el-button type="primary" @click="add(1)">添加图片模块</el-button>
            <el-button type="primary" @click="add(2)">添加文字模块</el-button>
            <el-button type="primary" @click="add(3)">添加轮播图模块</el-button>
          </div> -->

          <div style="width: 400px; position: absolute; right:0; top:0; background:#EFF1F8;height:100%; overflow: auto;" v-if="bianjitype != null">
              <div class="flex" >


                <div class="fright" style="margin-left:0;">
                  <div v-if="bianjitype == 1">
                    <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">编辑图片:</div>
                    <div class="flexc" style="margin-bottom: 20px;">
                      <div class="z">上传图片:</div>
                      <div class="r" style="position: relative;">

                        <chuantu ref="chuantu" @getimg="getimg" :widths="'365px'" :heights="'130px'" v-if="relo" :imgs="list[bianjiindex].img" style="background:white;margin:10px 0 20px 25px"></chuantu>
                      </div>
                      <div style="margin-left:30px;">
                        <div style="font-size: 14px; color:#333; ">1.建议宽度：750ppi 高度不限</div>
                        <div style="font-size: 14px; color:#333; ">2.上传格式：jpg/jpeg/png</div>
                      </div>
                    </div>
                     <!-- <div class="flexc" style="margin-bottom: 20px; ">
                       <div class="z">跳转链接:</div>
                       <div class="r">
                         <el-input v-model="list[bianjiindex].url" placeholder="请输入跳转链接"></el-input>
                       </div>
                     </div> -->

                  </div>

                  <div v-if="bianjitype == 2">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <div class="z">编辑文字:</div>
                       <div class="r" style="width: 300px;margin:10px 0 0 30px">
                         <el-input v-model="list[bianjiindex].text" :rows="4" type="textarea" placeholder="请输入文字介绍"></el-input>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 3" >

                    <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">banner设置:</div>
                    <el-button type="primary" @click="add2()" style="margin-left: 20px; margin-bottom:20px;background:#335DFF;border-radius:12px;border:none" :disabled="list[bianjiindex].list && list[bianjiindex].list.length >= 5">增加一张</el-button>
                    <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="margin-bottom: 20px;">
                      <div class="flexc" style="margin-bottom: 20px;">
                        <div class="z">图片{{index+1}}:</div>
                        <div class="r" style="position: relative;" >
                          <chuantu ref="chuantu2" @getimg="getimg2($event,index)" :widths="'365px'" :heights="'130px'"  :shows="true" v-if="relo" :imgs="item.img" style="background:white;margin:10px 0 0 25px"></chuantu>
                        </div>
                      </div>
                       <!-- <div class="flexc" style="margin-bottom: 20px;">
                         <div class="z">跳转链接:</div>
                         <div class="r">
                           <el-input v-model="item.url" style="width: 365px;" placeholder="请输入跳转链接"></el-input>
                         </div>
                       </div> -->
                    </div>
                    <div style="padding: 0 20px;">

                      <div style="font-size: 14px; color:#333; margin-bottom:20px;">1.建议尺寸：730x260像素，尺寸不匹配时，图片将被压缩或拉 伸以铺满画面，多张照片将会轮播形式展示</div>
                      <div style="font-size: 14px; color:#333; margin-bottom:20px;">2.上传格式：jpg/jpeg/png</div>
                    </div>
                  </div>


                  <div v-if="bianjitype == 4">
                     <div style="margin-bottom: 20px;">
                       <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">菜单设置:</div>
                       <div class="r">
                          <!-- <el-button type="danger" size="medium" @click="add3()" style="margin-left: 30px;">添加菜单</el-button> -->
                          <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 10px; width:64px;" v-if="item.url">
                              <div style="padding: 2px;  border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 60px; height:60px;" @click="bianjicaidan = index">
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 60px; line-height: 60px; height:60px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <el-switch
                                @change="changenav($event,index)"
                                style="margin-top: 5px;"
                                v-model="item.isshow"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                              </el-switch>
                              <!-- <div style="margin: 10px 0; font-size: 12px; color:#999;">{{item.name}}</div>
                              <div style="margin: 10px 0; font-size: 12px; color:#999;" @click="shanchu(index)">删除</div> -->
                            </div>
                          </div>
                         <div class="flexc" v-for="(item,index) in list[bianjiindex].list">
                           <!-- <div class="z">菜单{{index+1}}:</div> -->
                           <div class="r" style="padding-left: 30px;" v-if="bianjicaidan == index">
                             <div style="margin: 20px 0 10px;">更改图标：</div>
                             <chuantu ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg3($event,index)" ></chuantu>
                             <div style="margin: 20px 0 10px;">菜单名称：</div>
                             <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入菜单名称"></el-input>
                             <!-- <div style="margin: 20px 0 10px;">关联页面：</div>
                             <div style="margin-top:10px;">
                               <el-radio-group v-model="item.dizhi">
                                   <el-radio :label="1">自定义</el-radio>
                                   <el-radio :label="2">联系客服</el-radio>
                                   <el-radio :label="3">查看订单</el-radio>
                                 </el-radio-group>
                             </div>
                             <div style="margin-top:10px;"><el-input v-if="item.dizhi == 1" v-model="item.url" placeholder="请输入图片链接"></el-input></div> -->
                           </div>


                         </div>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 5">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <div class="z">分栏:</div>
                       <div class="r">
                          <el-radio v-model="list[bianjiindex].radio" label="1">一排一个</el-radio>
                          <el-radio v-model="list[bianjiindex].radio" label="2">一排俩</el-radio>
                       </div>
                     </div>
                  </div>
                  <div v-if="bianjitype == 6">
                     <div style="margin-bottom: 20px;">
                       <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">菜单设置:</div>
                       <div class="r">
                          <!-- <el-button type="danger" size="medium" @click="add3()" style="margin-left: 30px;">添加菜单</el-button> -->
                          <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 10px; width:64px;" v-if="item.url">
                              <div style="padding: 2px;  border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 60px; height:60px;" @click="bianjicaidan = index">
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 60px; line-height: 60px; height:60px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <el-switch
                                @change="changenav($event,index)"
                                style="margin-top: 5px;"
                                v-model="item.isshow"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                              </el-switch>
                              <!-- <div style="margin: 10px 0; font-size: 12px; color:#999;">{{item.name}}</div>
                              <div style="margin: 10px 0; font-size: 12px; color:#999;" @click="shanchu(index)">删除</div> -->
                            </div>
                          </div>
                          
                         <div class="flexc" v-for="(item,index) in list[bianjiindex].list">
                           <!-- <div class="z">菜单{{index+1}}:</div> -->
                           <div class="r" style="padding-left: 30px;" v-if="bianjicaidan == index">
                             <div style="margin: 20px 0 10px;">更改图标：</div>
                             <chuantu ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg3($event,index)" ></chuantu>
                             <div style="margin: 20px 0 10px;">菜单名称：</div>
                             <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入菜单名称"></el-input>
                             <!-- <div style="margin: 20px 0 10px;">关联页面：</div>
                             <div style="margin-top:10px;">
                               <el-radio-group v-model="item.dizhi">
                                   <el-radio :label="1">自定义</el-radio>
                                   <el-radio :label="2">联系客服</el-radio>
                                   <el-radio :label="3">查看订单</el-radio>
                                 </el-radio-group>
                             </div>
                             <div style="margin-top:10px;"><el-input v-if="item.dizhi == 1" v-model="item.url" placeholder="请输入图片链接"></el-input></div> -->
                           </div>


                         </div>
                       </div>
                     </div>
                  </div>
                </div>
              </div>
          </div>

          <div class="flexcc release_btn">
            <el-button type="danger" size="medium" @click="xiayibu()">保存并下一步</el-button>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as qiniu from 'qiniu-js'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  export default {
    components: {
      top,
      left,
      chuantu
    },
    props:{
      hide: false
    },
    name: "zhiboxiaoshou_fabu2",
    data() {
      return {
        bianjicaidan:0,

        list: [

        ],
        tongbuall: "",
        log: false,

        input: "",
        all: {
          erweima: ""
        },
        all2: {
          erweima: ""
        },
        bianjiindex:null,
        bianjitype:null,
        bianjitop:-9999,

        relo:false,
        newpeizhi:{
          store_id:this.$route.query.id,
          top_banner:"",
          is_complaint:"",
          complaint_position:"",
          color:"",
          is_more:'',
          is_complaint_chinese_display:'',
          is_more_chinese_display:'',
          address_display_type:''
        },
        showtp:false
      }
    },
    computed:{
      youdima(){
        if(this.list.filter(item=>item.type == 6).length > 0){
          if(this.newpeizhi.color){
            return {
              padding: "0 0 35px 0",
              backgroundColor: this.newpeizhi.color
            }
          }else{
            return {
              padding: "0 0 35px 0",
              backgroundColor: '#C2DEFA'
            }
          }
          
        }else{
          if(this.newpeizhi.color){
            return {
              backgroundColor: this.newpeizhi.color
            }
          }else{
            return {
              backgroundColor: '#C2DEFA'
            }
          }
          
        }
      }
    },
    created() {
      // console.log(this.list.includes(item=>item.type == 4))
      // 现在path 支持store和page 分别是存直播间和商品页的目录

      // let wenjianjia = 'web-store'
      let wenjianjia = 'test-web-store'
      if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
        wenjianjia = 'web-store'
      }
      if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
        wenjianjia = 'test-web-store'
      }
	  if(window.location.href.includes('localhost')){
	    wenjianjia = 'test-web-store'
	  }
      axios.get(`https://file.91haoka.cn/${wenjianjia}/${this.$route.query.id}.json?v=${Math.random()}`)
      // axios.get(`${this.apis}/storage/web-store/${this.$route.query.id}.json?v=${Math.random()}`)
        .then(response => {
          if(response.data){
            this.list = JSON.parse(response.data)
            console.log('读取以往文件进行兼容')
            console.log(this.list)
            for(var x=0;x<this.list.length;x++){
              if(this.list[x].type==4){
                for(var y=0;y<this.list[x].list.length;y++){
                  if(this.list[x].list[y].isshow==undefined){
                    this.list[x].list[y].isshow=true
                  }
                }
              }
            }
          }else{

          }
        })
        .catch(err =>{
          if(this.list.findIndex(item=>item.type == 4) == -1){
            this.list.push(
              {
                type:4,
                list:[
                  {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:"",isshow:true},
                  {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html",isshow:true},
                  {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html",isshow:true},
                ]
              }
            )
          }
          if(this.list.findIndex(item=>item.type == 5) == -1){
            this.list.push(
              {
                type:5,
                list:[
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp2.jpg",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp3.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp4.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp5.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                ],
                radio:"1"
              }
            )
          }
        })


        //获取新页面配置
        this.getpagemore()


    },
    mounted() {

    },
    methods: {
      //获取新页面配置
      getpagemore(){
        axios.get(`${this.apis}/api/store/make/up/info`,{params:{store_id:this.$route.query.id}})
          .then(response => {
            var that = this
            if(response.data.msg.code == 0){
              console.log('获取新页面配置')
              console.log(response)
              this.newpeizhi.top_banner = response.data.data.top_banner
              this.newpeizhi.is_complaint = response.data.data.is_complaint
              this.newpeizhi.complaint_position = response.data.data.complaint_position
              this.newpeizhi.color = response.data.data.color
              this.newpeizhi.is_more = response.data.data.is_more
              this.newpeizhi.is_complaint_chinese_display = response.data.data.is_complaint_chinese_display
              this.newpeizhi.is_more_chinese_display = response.data.data.is_more_chinese_display
              this.newpeizhi.address_display_type = response.data.data.address_display_type
              

              this.showtp = true
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      //保存新配置
      savemore(){
        if(!this.newpeizhi.color){
          this.newpeizhi.color = ''
        }
        // 新配置
        axios.post(`${this.apis}/api/store/make/up`,this.newpeizhi)
          .then(response => {
            if(response.data.msg.code == 0){

              
            }else{
              this.$message.error(response.data.msg.info);
            }
        });
      },
      changenav(e,index){
        console.log(e,index)
        var newitem = this.list[this.bianjiindex].list
        var changeitem = this.list[this.bianjiindex].list[index]
        changeitem.isshow = e
        // this.list[this.bianjiindex].list[index].isshow = e

        this.$set(newitem,index,changeitem)
      },
      shanchu:function(index){

        this.list[this.bianjiindex].list.splice(index,1)
      },
      add3:function(){
        if(this.list[this.bianjiindex].list.length < 5){
          this.list[this.bianjiindex].list.push(
            {img:"https://static.91haoka.cn/gantanhao/dh3.png",name:"名称",dizhi:1,url:""},
          )
        }
      },

      xia:function(){

        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex + 1

        if(index2 < arr.length){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      shang:function(){
        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex - 1
        if(index2 >= 0){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      shan:function(){

        // console.log(this.bianjitype)
        // console.log(this.list[this.bianjiindex])
        // if(this.bianjitype == 4){
        //   this.list[this.bianjiindex].list = [
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:""},
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html"},
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html"},
        //     ]
        // }else{
        //   this.list.splice(this.bianjiindex,1)
        //   this.bianjitype = this.list[this.bianjiindex].type
        // }
        this.list.splice(this.bianjiindex,1)
        this.bianjitype = this.list[this.bianjiindex].type
      },

      bianji:function(item,index,e){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type
        // this.bianjitop = e.target.offsetTop
        // console.log(e)
        // console.log(this.bianjitop)


        if(item.type == 1 && this.list[this.bianjiindex].img != undefined){
          // this.$nextTick(()=>{
          //   this.$refs.chuantu.img = this.list[this.bianjiindex].img
          // })
        }
        if(item.type == 2){

        }
        if(item.type == 3){
          this.$nextTick(()=>{
            this.list[this.bianjiindex].list.forEach((item2,index2)=>{
              this.$refs.chuantu2[index2].img = item2.img
            })
          })
        }

        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      bianji2:function(item,index){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type



        this.$nextTick(()=>{
          this.list[this.bianjiindex].list.forEach((item2,index2)=>{
            console.log(item2)
            this.$refs.chuantu2[index2].img = item2.img
          })
        })
      },
      add2:function(){
        if(this.list[this.bianjiindex].list.length < 5){
          this.list[this.bianjiindex].list.push(
            {img:"",url:""}
          )
        }
      },
      add:function(type){
        if(type == 1){
          this.list.unshift(
            {type:1,img:"",url:""}
          )
        }

        if(type == 2){
          this.list.unshift(
            {type:2,text:""}
          )
        }

        if(type == 3){
          this.list.unshift(
            {
              type:3,list:[
                {img:"",url:""}
              ],
            }
          )
          this.relo = false
          this.$nextTick(()=>{
            this.relo = true
          })
        }
        if(type == 4){
				  this.list.unshift(
				    {type:4,list:[
				      // {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:"",isshow:true},
				      {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html",isshow:true},
				      {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html",isshow:true},
				    ]}
				  )
				}
        if(type == 6){
          this.list.unshift(
            {type:6,list:[
              // {img:"https://static.91haoka.cn/dh7.png",name:"号卡列表",dizhi:1,url:"",isshow:true},
              {img:"https://static.91haoka.cn/dh8.png",name:"联系客服",dizhi:2,url:"kefu.html",isshow:true},
              {img:"https://static.91haoka.cn/dh9.png",name:"订单查询",dizhi:3,url:"dingdan.html",isshow:true},
            ]}
          )
        }
        this.bianjiindex = 0
        this.bianjitype = type
      },
      getimg: function(img) {
        this.list[this.bianjiindex].img = img
      },
      getimg2:function(img,index){
        // this.list[this.bianjiindex].list[index].img = img
        if(img == ''){
          this.list[this.bianjiindex].list.splice(index,1)
        }else{
          this.list[this.bianjiindex].list[index].img = img
        }
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      getimg3:function(img,index){
        this.list[this.bianjiindex].list[index].img = img
      },
      getimg4:function(img,index){
        console.log('getimg4')
        console.log(img)
        this.newpeizhi.top_banner = img
      },


      xiayibu:function(){

        var Obj2str = function(o) {
            if (o == undefined) {
                return "";
            }
            var r = [];
            if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
            if (typeof o == "object") {
                if (!o.sort) {
                    for (var i in o)
                        r.push("\"" + i + "\":" + Obj2str(o[i]));
                    if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                        r.push("toString:" + o.toString.toString());
                    }
                    r = "{" + r.join() + "}"
                } else {
                    for (var i = 0; i < o.length; i++)
                        r.push(Obj2str(o[i]));
                    r = "[" + r.join() + "]";
                }
                return r;
            }
            return o.toString().replace(/\"\:/g, '":""');
        }


        // let wenjianjia = 'web-store'
        let wenjianjia = 'test-web-store'
        if(process.env.NODE_ENV === 'development'){
          // wenjianjia = 'test-web-store'
        }
        if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
          wenjianjia = 'web-store'
        }
        if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
          wenjianjia = 'test-web-store'
        }

        axios.post(`${this.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia}/${this.$route.query.id}.json`})
          .then(response => {
            var that = this
            if(response.data.msg.code == 0){
              const observer = {
                next(res){

                },
                error(err){

                },
                complete(res){


                  //保存新配置
                  that.savemore()


                  that.$message.success('保存成功');
                  if(that.$route.query.xcxtype == 'wx'){
                    that.$emit('tabCilck','three')
                  }else{
                    that.$emit('tabCilck','two')
                  }
                  
                  // that.$router.push({
                  //   path:'/zhiboxitong/xiaochengxu/xcxstorelist',
                  //   query:{
                  //     app_id:that.$route.query.app_id,
                  //     xcxtype:that.$route.query.xcxtype
                  //   }
                  // })
                }
              }

              console.log(this.list)

              let files = Obj2str(JSON.stringify(this.list))
              let file = new File([files], `${wenjianjia}/${this.$route.query.id}.json`, {type: 'application/json'});
              const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

 
        
      },
      getxq:function(){
        axios.get(`${this.apis}/api/store/info?id=${this.$route.query.id}`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.all = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      choosecolbtn(color){
        this.newpeizhi.color = color
      }
    }
  }
</script>
<style scoped >
.t_list_tag{
font-size: 12px;
color: #666666;
background-color: #F5F5F5;
border-radius: 3px;
margin-right: 5px;
padding: 3px;
}
.t_tag_font{
  background-color: white;
  margin-right: 10px;
  border-radius: 10px;
  padding: 3px 9px;
  font-size: 12px;
}
.t_tag_box{
  display: flex;
  margin-bottom: 10px;
}
.t_choose_color_box{
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
<style scoped lang="less">
    .at_flex{
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      font-weight: bold;
      font-size: 18px;
      img{
        width: 18px;
        height: 18px;
        margin: 4px 8px;
      }
    }
/deep/ .el-input__inner{
  border-radius: 12px;
}
  .zhiboxiaoshou_fabu2 {
    color: #333;
    min-height: 100vh;
    img{ display: block;}
    /deep/ .el-breadcrumb {
      font-size: 16px;
    }

    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 0px;
    }

    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }

    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }

    * {
      box-sizing: border-box;
    }
.dibudaohang{ position: absolute; bottom: 20px; left: 20px; width:360px !important; background: #fff;margin-bottom: 0px !important;}
        .yincang{ display: none;}
    .zhiboxitong_content {
      height: calc(100vh - 70px);

      .left {
        width: 210px;
        background: #FAFAFE;
        height: 100%;
      }

      .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
      .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
      .r{}

      .right {
        width: calc(100vw - 220px);
        .zhiboxitong_right {
          overflow: auto;
          background: #F8F9FD;
          border-radius: 5px;
        }
        .tianjiatit{margin-bottom: 40px; cursor: pointer; font-size: 12px; text-align:center; width: 100px;}
        .shunxu{ padding: 50px 20px; border-radius: 5px;
          img{ width: 15px;margin-bottom: 10px; cursor: pointer;}
        }
        .actcaidan{ border: 1px #F56C6C dashed !important;}
        .fleft {
            width: 400px; height: 800px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png');background-size: 400px 700px; padding: 50px 20px;
            margin-top: 50px;margin-left: 100px;
          .li{
            width: 100%; padding: 2px;  border: 1px #9e9e9e dashed; margin-bottom: 20px; cursor: pointer;
            img{ width: 100%; display: block;}
            .nav{ text-align: center;  flex: 1;display:flex ;
              img{ width: 34px; height:34px;border-radius: 3px;margin-bottom: 0px;margin-right: 10px;}
            }
          }
          .bianjizhong{ border-color: #F56C6C;}
          .awu{ padding: 10px; font-size: 12px;color: #999;}

          // .yihang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 100%; margin-bottom: 10px;}
          // }
          // .lianghang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 48%; margin-bottom: 10px;}
          // }
          .yige{ margin-bottom: 10px; border-radius: 5px;
            .shopliimg{ width: 100px; margin-right: 10px;
              img{width: 100px;height: 100px; display: block;}
            }
            .shopliname{ color: #999; font-size: 12px;padding: 0px 0;width: 180px;}
          }
          .liangge{width: 123px; border-radius: 5px;
            .shopliimg{ width: 123px;
              img{width: 123px; height: 123px; display: block; }
            }
            .shopliname{ color: #999; font-size: 12px;padding: 5px;}
          }

        }

        .fright {
          margin-left: 100px;
          padding-top: 50px;



        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
  .contain_module{
    width: 140px !important;
    height: 40px;
    background: white;
    border-radius: 10px;
    line-height: 40px;
    text-align: center;
  }
  .release_btn{
    position: absolute;
    left: 340px;
    bottom: 90px;
    /deep/ .el-button{
      width: 160px;
      height: 48px;
      background: #2974FF;
      border-radius: 12px;
      border: 0;
    }
  }
    /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
/deep/ .el-radio__input.is-checked .el-radio__inner {
background: #3158F1;
border:1px solid #3158F1;

 }
/deep/ .el-radio__input.is-checked+.el-radio__label{
color: black;
}
</style>
